<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="/page/jspf/prepare.jspf"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title><spring:message code="application.title" /></title>
<%@include file="/page/jspf/head.jspf"%>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<%@include file="/page/jspf/console-ztree.jspf"%>
<script type="text/javascript">
$(function(){
	
	//当前的节点		
	
	
	var $form = $("#dict_form form");
	$("#dict_form").dialog({
		autoOpen: false,
		resizable: false,
		height: 450,
		width: 520,
		modal: true,
		buttons: {
			'提交': function() {
				var valid = $form.valid();
				if(!valid) return;
				var url ="${ctx}/system/dict/asynSave/" + curCode;
				var data = $form.serialize();
				data = $.param({pcode:curClickCode})+'&' + data;
				$.ajax(url, {
					type: "post",
					dataType: "json",
					async:false, //同步执行
					data:data,
				}).done(function(result){
					if(result && result.code == 0) {
						$common.tipDialog("提示","操作成功");
					}else {
						$common.tipDialog("提示", result.msg | "操作失败");
					}
				});
				
				clickNode(curNode);
				$(this).dialog("close");
				$form[0].reset();
			},
			
			'关闭': function() {
				$(this).dialog("close");
				$form[0].reset();
			}
		}
	});
	
});
	
	
</script>
</head>
<body>
	<%@include file="/page/jspf/console-body-first.jspf"%>
	<div class="row row-nocol">
		<hr />
		<!-- 操作信息提示的地方 -->
		<c:if test="${ not empty remind}">
			<div class="alert alert-${ remind.level}">
				<button data-dismiss="alert" class="close" type="button">
					<i class="glyphicon glyphicon-remove"></i>
				</button>
				${ remind.message }
			</div>
		</c:if>
		<div class="action-bar">
			<!-- 前往新增页面 -->
			<!-- <button class="btn btn-sm btn-warning action-get" 
				id="add_dict"
				data-href="0">
				<i class="glyphicon glyphicon-plus"></i>添加
				<i class="action-param" data-key="pcode" data-value="1" ></i>
			</button> -->
			<!-- 打开新增dialog -->
			<button class="btn btn-sm btn-info"  type="button"
				id="add_dict"
				onClick="addDict()">
				<i class="glyphicon glyphicon-plus"></i>添加
				<i class="action-param" data-key="pcode" data-value="1" ></i>
			</button>
			
		</div>
		<div class="row">
			<!-- 树形结构 -->
			<div class="col-md-2" style="border-right:1px dotted #AAAAAA">
				<ul id="treeDemo" class="ztree" style="width: 100%;margin-bottom:20px" 
					data-url="${ctx}/system/dict/findAllChildDict"
					data-method="afterInitTree();">
				</ul>
			</div>
			<!-- 子列表数据 -->
			<div class="col-md-10">
				<!--列表栏-->
				<form class="nocol">
					
		
					<table class="table table-striped table-bordered table-hover ">
						<thead>
							<tr class="text-center">
								<th>编码</th>
 								<th>名称</th>
								<th>备注</th>
								<th>排序</th>
								<th>启用/禁用</th>
								<th>是否删除</th>
								<th class="text-info">操作</th>
							</tr>
						</thead>
						<tbody align="center" id="childRecord">
							<tr v-for="cur in datas">
								<td v-text="cur.code"></td>
								<td v-text="cur.name"></td>
								<td v-text="cur.remark"></td>
								<td v-text="cur.sort"></td>
								<td ><span v-bind:class="{0:'label label-warning', 1:'label label-success'}[cur.enabled]">{{cur.enabled==0?'禁用':'启用'}}</span></td>
								<!-- <td v-text="cur.isDelete==0?'否':'是'"></td> -->
								<td ><span v-bind:class="cur.isDelete==0?'label label-info' :'label label-danger'">{{cur.isDelete==0?'否':'是'}}</span></td>
								<td>
									<div class="btn-group-dis">
										 <!-- <a class="btn btn-xs btn-success " :href="[cur.code]"
												data-toggle="tooltip" title="编辑"> <i
												class="glyphicon glyphicon-edit"></i>
											</a>  
											 -->
											<button class="btn btn-xs btn-success " type="button" id="update_dict"  v-on:click="updateDict(cur.code)">
												<i class="glyphicon glyphicon-edit"></i>编辑
											</button>
											
											<button class="btn btn-xs btn-danger " type="button"   v-on:click="deleteDict(cur.code)">
												<i class="glyphicon glyphicon-trash"></i>
											</button>
											
											<!-- <button class="btn btn-xs btn-danger action-get"
												:data-href="[cur.code+'/remove']" data-toggle="tooltip"
												title="删除" data-confirm="确认删除本条记录吗">
												<i class="glyphicon glyphicon-trash"></i>
											</button> -->
										</div>
								</td>
								
						</tbody>
					</table>
				</form>
			</div>
		</div>
	</div>
	<%@include file="/page/jspf/console-body-last.jspf"%>
	
	<!-- 弹窗 弹出编辑页面 -->	
	<div id="dict_form" class="">
		<form class="form-horizontal validate" role="form" method="post" id="update_form">
	
			<%-- <input type="hidden" name="pcode" value="${pcode }"> --%>
	
			<div class="form-group">
				<label for="parentId" class="col-sm-3 control-label">名称*</label>
				<div class="col-sm-6 ">
					<input type="text" class="form-control" id="name" name="name"
						value="${ entity.name }" data-rule-required="true"
						data-rule-digits="false" data-rule-number="false" v-model="name"
						placeholder="请输入名称">
				</div>
				<div class="col-sm-3  help-inline form-control-static"></div>
			</div>
			
			<div class="form-group">
				<label for="parentId" class="col-sm-3 control-label">业务值</label>
				<div class="col-sm-6 ">
					<input type="text" class="form-control" id=businessValue name="businessValue"
						value="${ entity.businessValue }" data-rule-required="false"
						data-rule-digits="false" data-rule-number="false" v-model="businessValue"
						placeholder="请输入业务值">
				</div>
				<div class="col-sm-3  help-inline form-control-static"></div>
			</div>
	
	
			<div class="form-group">
				<label for="parentId" class="col-sm-3 control-label">备注*</label>
				<div class="col-sm-6 ">
					<input type="text" class="form-control" id="remark" name="remark"
						<%-- value="${ entity.remark }"  --%>data-rule-required="true"
						data-rule-digits="false" data-rule-number="false"
						placeholder="请输入备注" v-model="remark">
				</div>
				<div class="col-sm-3  help-inline form-control-static"></div>
			</div>
	
			
			<div class="form-group">
				<label for="parentId" class="col-sm-3 control-label">排序*</label>
				<div class="col-sm-6 ">
					<input type="text" class="form-control" id="sort" name="sort"
						value="${ entity.sort }" data-rule-required="true"
						data-rule-digits="false" data-rule-number="false"
						placeholder="请输入排序"
						v-model="sort">
				</div>
				<div class="col-sm-3  help-inline form-control-static"></div>
			</div>
	
	
			<div class="form-group">
				<label for="parentId" class="col-sm-3 control-label">状态*</label>
				<div class="col-sm-6 ">
	  				<select class="form-control" id="enabled" name="enabled" data-value="${ entity.enabled }" data-rule-required="true"
	  					v-model="enabled">
						<option value="0">禁用</option>
						<option value="1">启用</option>
					</select>
				</div>
				<div class="col-sm-3  help-inline form-control-static"></div>
			</div>
	
	
			<div class="form-group">
				<label for="parentId" class="col-sm-3 control-label">是否删除*</label>
				<div class="col-sm-6 ">
	  				<select class="form-control" id="isDelete" name="isDelete" data-value="${ entity.isDelete }" data-rule-required="true"
	  					v-model="isDelete"
	  					>
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</div>
				<div class="col-sm-3  help-inline form-control-static"></div>
			</div>
	
	
		</form>	
	</div>
	<script type="text/javascript">
		//当前被点击的节点	
		var curClickCode = 1;//1 为根节点
		var curNode ;
		var curCode = 0;
		var dictVue = new Vue({
			el: '#childRecord',
			data : {
				datas:[]
			},
			created: function(){
				var self = this;
				self.datas = getData();
				
			}
		});
		
		ztreeSetting = {
				async: {
					enable: true
				},
				view:{
					showIcon: true
				},
				check: {
					enable: false
					
				},
				callback : {
					onClick: zTreeOnClick,
					onCollapse: zTreeOnCollapse
				}
			};
		
		
		//折叠树
		function zTreeOnCollapse(event, treeId, treeNode) {
		    console.info("折叠树 ");
		    
		};
		
		//点击树
		function zTreeOnClick(event, treeId, treeNode) {
			var treeObj = $(".ztree").data("ztree");
			if(treeNode) {
				curNode = treeNode;
				curClickCode = treeNode.code;
				treeObj.removeChildNodes(treeNode);
				$("#add_dict i[data-key='pcode']").data("value", curClickCode);
			}
			
			var childData = getData();
			dictVue.$data.datas = childData;
			if(childData) {
				if(!treeNode) {
					treeObj.addNodes(null,childData,true);// 如果是根节点，那么就在null后面加载数据
				}else{
					treeObj.addNodes(treeNode,childData,true);//如果是加载子节点，那么就是父节点下面加载
				}
				treeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开
			}
		};
		
		
		function getData(){
			var url = "${ctx}/system/dict/findAllChildDict";
			var data = null;
			$.ajax(url,{
				type: "post",
				dataType: "json",
				async:false, //同步执行
				data:{code: curClickCode},
			}).done(function(result){
				if(result && result.code == 0) {
					data =  result.data;
				}
			});
			return data;
		}
		
		
		
		function afterInitTree(){
			curNode = $(".ztree").data("ztree").getNodesByFilter(function (node) { return node.level == 0 })[0];
			clickNode(curNode);
		}
		//触发一个node的点击事件
		function clickNode(node){
			var ztree =  $(".ztree").data("ztree");
			if(node) {
				ztree.setting.callback.onClick(null, ztree.setting.treeId, node);//触发函数
				
			}
		}

		
		//打开编辑
		function updateDict(code){
			curCode = code;
			$.ajax("${ctx}/system/dict/findDict",{
				type: "GET",
				dataType: "json",
				data: {code: code},
				async:false //同步执行
			}).done(function(result){
				if(result && result.code == 0) {
					var data =  result.data;
					clickNode(curNode);
					$("#update_form").bindData(data);
				}
			});
			$("#dict_form").dialog("open");
		}
		
		//新增字典
		function addDict() {
			curCode = 0;
			$("#dict_form").dialog("open");
		}
		
		//删除字典
		function deleteDict(code){
			$common.tipDialog("删除", "确认删除当前字典吗", function(){
				$.ajax("${ctx}/system/dict/asynRemove?code=" + code,{
					type: "post",
					dataType: "json",
					async:false //同步执行
				}).done(function(result){
					if(result && result.code == 0) {
						var data =  result.data;
						clickNode(curNode);
					}
				});
			});
		}
		
		
	</script>
	
	
	
	
</body>
</html>
